<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Change Destination</title>
        <h:outputStylesheet name="dd.css"/>
    </h:head>
    <h:body>
        <f:metadata>
            <f:viewParam name="trackingId"
                         value="#{changeDestination.trackingId}" />
            <f:viewAction action="#{changeDestination.load}" />
        </f:metadata>
        <h:form>
            <table>
                <tbody>
                    <tr>
                        <td><p:outputLabel value="Origin: " /></td>
                        <td><p:outputLabel value="#{changeDestination.cargo.originName}" /></td>
                    </tr>
                    <tr>
                        <td><p:outputLabel value="Current destination: " /></td>
                        <td><p:outputLabel value="#{changeDestination.cargo.finalDestinationName}" /></td>
                    </tr>
                    <tr>
                        <td><p:outputLabel value="New destination: " /></td>
                        <td><p:selectOneMenu
                                value="#{changeDestination.destinationUnlocode}"
                                p:autofocus="true">
                                <f:selectItems value="#{changeDestination.potentialDestinations}"
                                               var="location" itemLabel="#{location.name}"
                                               itemValue="#{location.unLocode}" />
                            </p:selectOneMenu></td>
                    </tr>
                    <tr><td><br/><br/><br/><br/></td></tr> <!-- TODO: bottom align instead of this! -->
                    <tr>
                        <td>
                            <p:commandButton value="Cancel" action="#{changeDestinationDialog.cancel()}" />
                        </td>
                        <td>
                            <p:commandButton value="Update"
                                             action="#{changeDestination.changeDestination()}"
                                             oncomplete="window.location.replace(window.location.href);"/>
                        </td>
                    </tr>
                </tbody>
            </table>
        </h:form>
    </h:body>
</html>